<template>
  <ClientOnly>
    <div style="height: 84px;background:#000000;padding: 0 20px;box-sizing: border-box;justify-content: space-between;position: sticky;top: 0;z-index: 100"
         class="fixed-row box_block">
      <h1 style="color: #fff">神客行</h1>
      <div class="fixed-row hidden-xs-only" style="flex: 0.5;height: 100%;">
        <div v-for="item in barNavTop" :key="item.title"
             @click="clickTitle(item)"
        class="notActiveTitle fixed-row" :class="[activeName == item.title ? 'active-title' : '']">{{item.title}}</div>
      </div>
      <div class="fixed-row box_block">
<!--        <div class="fixed-column-item" style="align-items: flex-start;color: #fff;font-family: microsoft yahei;font-size: 14px">-->
<!--          <span>快速咨询热线</span>-->
<!--          <span>010-86461730</span>-->
<!--        </div>-->
        <div></div>
        <div></div>
        <div class="hidden-sm-and-up" style="color: #fff;margin-left: 20px">
          <el-dropdown trigger="click" @command="commandTitle">
            <span class="iconfont icon-liebiaomoshi_kuai" style="color: #fff;font-size: 30px"></span>
            <template #dropdown>
              <el-dropdown-menu >
                <el-dropdown-item :command="item.title" v-for="item in barNavTop" :key="item.title">{{item.title}}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </ClientOnly>

</template>

<script lang="ts" setup>
  import {reactive} from 'vue'
  import {useRouter} from 'vue-router'
  const barNavTop = reactive([
    {
      title:'首页',
      path:'/home'
    },
    {
      title:'产品介绍',
      path:'/productIon'
    },
    {
      title:'新闻中心',
      path:'/newsCenter'
    },
    {
      title:'关于我们',
      path:'/about'
    },
    {
      title:'联系我们',
      path:'/phoneMy'
    }
  ])
  const router = useRouter()
  const activeName = ref('首页')
  function clickTitle(row){
    activeName.value = row.title
    router.push({path:row.path})
  }

  function commandTitle(name){
    const ind = barNavTop.findIndex(item => item.title == name)
    activeName.value = barNavTop[ind].title
    router.push({path:barNavTop[ind].path})
  }
</script>

<style lang="less" scoped>
  .notActiveTitle{
    height: 100%;
    font-size: 0.909vw;
    padding: 0 20px;
    color: #fff;
    cursor: pointer;
    position: relative;
    transition:color 0.5s;
    &:hover{
      color: #0d54eb;
      &::after{
        content: '';
        display: inline-block;
        height: 3px;
        border-radius: 3px;
        background: #0d54eb;
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        animation:fadeIn 0.5s forwards;
      }
    }
  }

  .active-title{
    color: #0d54eb;
    &::after{
      content: '';
      display: inline-block;
      width: 45px;
      height: 3px;
      border-radius: 3px;
      background: #0d54eb;
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  @keyframes fadeIn {
    from {
      width: 0;
    }
    to {
      width: 45px;
    }
  }

</style>
